<template>
	<view>
		<j-load v-if="loading"></j-load>
		<view v-else>
			<view v-if="couponList[0].col.length!=0" v-for="(child,i) in couponList" :key="i" class="cu-card article">
				<view class="flex">
					<view class="flex-sub radius" v-for="(item,index) in child.col" :key="getKey(i,index)"
						style="position: relative;">
						<view class="cu-item shadow elevation-2-4" style="margin: 20upx 10upx 30upx;padding-bottom:0;">
							<view class="content radius" style="padding:16upx 0"
								:class="item.useTime || item.expire?'bg-k-gray':'bg-white'">
								<view class="desc">
									<view class="text-content" style="height:2.5em">
										<view class="flex">
											<view class="flex-sub">
												<view class="line-limit-length text-center"
													style="font-size: 24upx;margin-top:16upx;">{{item.name}}</view>
											</view>
										</view>
									</view>
									<view class="text-center margin-bottom-xs" style="margin-top: 20upx;">
										<text class="" :class="item.useTime || item.expire ? '':'text-primary'">
											<text class="text-df">{{item.currencyUnit}}</text>
											<text class="text-ssl" style="font-size: 60upx;">{{item.couponNumPrice}}</text>
											<text class="text-df">.{{item.couponDecimal}} </text>
										</text>
										<text class="text-xxs" style="margin-left:8upx">{{$t('JLink.coupon.fulfill')}}{{item.currencyUnit}}{{item.conditionalAmount}}{{$t('JLink.coupon.UseOver')}}</text>
									</view>
									<view style="border-top:1px dashed #D8D8D8;position:relative">
										<!-- -->
										<view class="text-center text-xs" style="margin-top:10upx;"
											:style="item.useTime || item.expire ? 'color:#fff;':'color:#787878'">
											{{$t('JLink.coupon.ValidUntil')}}：{{item.expireTime}}</view>
										<view
											style="position: absolute;left:-12upx;top:-18upx;height:30upx;width:30upx;background-color: #F5F5F5;border-radius: 50%;">
										</view>
										<view
											style="position: absolute;right:-12upx;top:-18upx;height:30upx;width:30upx;background-color: #F5F5F5;border-radius: 50%;">
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="style2 text-sm" :class="item.useTime || item.expire?'bg-k-tag':'k-bg-orang'">
							<text v-if="item.useTime">{{$t('JLink.coupon.Used')}}</text>
							<text v-else>
								<text v-if="item.expire">{{$t('JLink.coupon.expired')}}</text>
								<text v-else>{{$t('JLink.coupon.Unused')}}</text>
							</text>
							<view :class="item.useTime || item.expire?'k-grey':'k-orange'"></view>
						</view>
					</view>
					<view v-if="child.col.length===1" class="flex-sub radius"></view>
				</view>
			</view>
			<coupons-data v-else></coupons-data>
		</view>
	</view>
</template>

<script>
import logins from '@/utils/loginApi.js'
import {CouponList} from '@/API/api.js'
import {getLocalDate} from '@/utils/index.js'
import couponsData from "@/components/uni-data/index.vue"

const {handleLogin,httpReturn} = logins(); //登录

export default {
  components: {
    couponsData
  },
  props:{

  },
  data() {
    return {
      couponList: [{col: []}],
      loading:false
    }
  },
  mounted() {
    this.handleMethod();
  },
  onLoad(opt) {

  },
  onUnload() {
  },
  onShow() {
  },
  methods: {
    getKey(i,index){
      return i+'_'+index
    },
    handleMethod () {
      handleLogin(() => {
        this.getCoupon()
      })
    },
    /* 获取优惠券列表 */
    getCoupon () {
      this.loading = true;
      CouponList({}).then(res=>{
        this.loading = false;
        httpReturn(res,(data)=>{
          let nowDate = new Date().getTime();	//当前时间
          let datas = data?data:[];
          if(datas.length){
            let contentsIndex = 0;
            this.couponList=[{col: []}];
            datas.forEach((z,i)=>{
              let couponAmount = z.couponAmount? z.couponAmount.split('.') : [0,0];
              z.expire = z.expireTime < nowDate ? true :false;//是否过期
              z.expireTime = z.expireTime ? getLocalDate(z.expireTime) : '';
              z.useTime = z.useTime ? getLocalDate(z.useTime) : '';
              z.couponNumPrice = couponAmount[0];
              z.couponDecimal = couponAmount[1];
              if(i % 2 == 0 && i !=0){
                contentsIndex += 1;
                this.couponList[contentsIndex] = {};
              }
              if(this.couponList[contentsIndex].col==undefined){
                this.couponList[contentsIndex].col = []
              }
              this.couponList[contentsIndex].col.push(z);
            })
          }
        },(code) =>{

        })
      }).catch(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
	.style2{
		position:absolute;
		top:0;
		right:30upx;
		border-radius: 30upx;
		height:46upx;
		line-height: 46upx;
		padding:0 25upx;
	}
	.bg-o {
		background-color: rgba(246, 229, 178, 0.22);
	}

	.k-bg-orang {
		background-color: #F69E48;
		color: #fff;
	}

	.k-orange {
		position: absolute;
		left: 0;
		bottom: -12upx;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20upx 0 20upx 24upx;
		border-color: transparent transparent transparent #F69E48;
	}

	.k-grey {
		position: absolute;
		left: 0;
		bottom: -16upx;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 26upx 0 20upx 26upx;
		border-color: transparent transparent transparent #B2B2B2;
	}

	.bg-k-gray {
		background: #DFDFDF;
		color: #fff;
	}

	.bg-k-tag {
		background: #B2B2B2;
		color: #fff;
	}

  .line-limit-length {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;			// 行数
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
